<template>
    <div>
        <swiper :options="swiperOption">
            <swiper-slide v-for="slide in swiperSlides" :key="slide.id">
                <img class="my-swiper" :src="slide" alt="banner.jpg">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
// require styles
import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "carrousel",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperSlides: [
        require("../image/banner01.jpg"),
        require("../image/banner02.jpg"),
        require("../image/banner03.jpg")
      ]
    };
  },
  mounted() {
    setInterval(() => {
      if (this.swiperSlides.length < 3) {
        this.swiperSlides.push(this.swiperSlides.length + 1);
      }
    }, 3000);
  }
};
</script>

<style scoped lang="less">
.my-swiper {
  width: 100%;
}
.swiper-pagination-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #6a7531;
  border-radius: 50%;
  margin-right: 7px;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #1f1e25;
}
</style>